<template>
          <div class="goodsmenu" @click="handle(data.id)" >
            <div>
            <div class="img2"><img :src="data.img_url" alt=""></div>
            </div>
            <div class="goodstotal">
            <div class="goodprice">
            <p>{{data.title}}</p>
            </div> <slot name="price"> 
            <div class="goodsell">
               
                <div>
                <span> &yen;{{data.sell_price}}</span>
                <s> &yen;{{data.market_price}}</s>
                </div>
                  <span> 已售:{{data.buy}}</span>
              
            </div>  </slot>
            </div>
        </div> 
   
</template>

<script>
export default {
    props:{
        data:{
            type:Object,
            require:true
        }
    },

    methods:{
        handle(getid,even){
            this.$emit("toid",getid,even)
        }
    }

}
</script>

<style lang="scss" scoped>
.goodsmenu{ 
    margin: 0.3rem auto;
    box-shadow:0 0 0.1rem #dfdddd;
    background-color: #fff;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    width: 6.8rem;
    overflow: hidden;
    font-size: 0.6rem;
    text-align: center;
    color: #7c7a79;
    .goodstotal{
        padding: 0 0.3rem;
    }
    .img2 img{
        width: 6.8rem;
        height: 6.8rem;
    }
    .goodprice p{
     overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin:0rem 0;
    }
    .goodsell{
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.2rem;
        span:nth-child(1){
        color: #ff3973;
;
        font-size: 0.6rem;

        }
        span:last-child{
        color: #7c7a79;
        float: right;
        font-size: 0.3rem;
        }
        s{
        font-size: 0.3rem;
        margin-left: 0.2rem;
        vertical-align: middle;
        }
    }

}
</style>